<template>
  <div>
    <el-backtop :right='20' :bottom='400'>
      <!-- 加个标签 -->
      回到顶部
    </el-backtop>
    <div class="Big">
      <div style="width:20%;">
        <el-collapse v-model="activeNames">
          <el-collapse-item :name="ind" v-for="(val,ind) in singerList"
            :key="ind">
            <template slot="title">
              <span
                style='margin-left:20px;font-size:25px;font-weight:bold;'>{{val.title}}
              </span>
            </template>
            <div class="rankList" v-for="(val2 ,ind2) in singerSort" :key="ind2"
              @click="artChange(val.area,val2.type,val.title,val2.artTitle),changeClass($event)">
              {{val.title}}{{val2.artTitle}}
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <div style="width:900px;margin-left:3px">
        <el-card>
          <div slot="header"
            style="line-height:30px;height:30px;font-size:30px;font-weight:bold;text-align:left;padding-left:20px;">
            {{artTitle}}
          </div>
          <div class="A_Z_list">
            <span id="A_Z" @click="searchArt(false),changeClass2($event)"
              style="cursor: pointer;font-size:15px;padding:0 5px;border-radius:3px;">
              热门
            </span>
            <span id="A_Z" v-for="val in AZ" :key="val" class="English"
              @click="searchArt(val),changeClass2($event)">{{val}}</span>
            <span id="A_Z" @click="searchArt(0),changeClass2($event)"
              style="cursor: pointer;font-size:15px;padding:0 5px;border-radius:3px;">
              其他
            </span>
          </div>

          <div class="artList">
            <div v-for="(val,ind) in artList[0]" :key="ind" :title='val.name'
              style="width:20%;height:180px;padding:0 10px;margin:20px 0;">
              <el-image @click="searchArtName(val.id)"
                style="cursor: pointer;width:150px;height:150px;border:1px solid #ccc;object-fit:cover"
                fit="cover" :src="val.img1v1Url"></el-image>
              <span class="fontName"
                @click="searchArtName(val.id)">{{val.name}}</span>
            </div>
            <div style="width:20%;height:35px;" class="over_ellipsis"
              :title="val.name" v-for="(val,ind) in artList[1]" :key='ind+"s"'>
              <span class="fontName"
                @click="searchArtName(val.id)">{{val.name}}</span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { SingerSortList } from '../../api/HotSinger'
export default {
  name: '',
  data () {
    return {
      activeNames: [],
      // 默认全部展开
      singerList: [
        // 地区列表
        { title: '华语', area: 7, },
        { title: '欧美', area: 96, },
        { title: '日本', area: 8 },
        { title: '韩国', area: 16 },
        { title: '其他', area: 0 }
      ],
      singerSort: [
        // 歌手分类列表
        { artTitle: '男歌手', type: 1 },
        { artTitle: '女歌手', type: 2 },
        { artTitle: '组合/乐队', type: 3 }
      ],
      artList: [],
      // 歌手列表
      artTitle: '',
      // 点击的标题
      AZ: [],
      // A-Z列表,
      activeSearch: {}
      // 当前选中的搜索项
    };
  },
  async created () {
    this.$nextTick(() => {
      let rankL = document.querySelectorAll('.rankList')
      rankL[0].classList.add('rankListPointer')
      let Az = document.querySelectorAll('#A_Z')
      Az[0].classList.add('EnglishColor')
    })
    // 先给头一个选项添加类名
    this.singerList.forEach((val, ind) => {
      this.activeNames.push(ind)
    })
    // 展开所有折叠面板
    this.artChange(7, 1, '华语', '男歌手')

    // 初始渲染一个
    for (var i = 0; i < 26; i++) {
      this.AZ.push(String.fromCharCode(65 + i))
    }
  },
  methods: {
    changeClass (e) {
      // 点击后修改左边的类名
      this.$nextTick(() => {
        let rankL = document.querySelectorAll('.rankList')
        rankL.forEach(val => val.classList.remove('rankListPointer'))
        e.currentTarget.classList.add('rankListPointer')
      })
    },
    changeClass2 (e) {
      // 点击后修改右边字母的选中样式
      this.$nextTick(() => {
        let Az = document.querySelectorAll('#A_Z')
        Az.forEach(val => val.classList.remove('EnglishColor'))
        e.currentTarget.classList.add('EnglishColor')
      })
    },
    changeList (list) {
      // 转换数组为可用格式
      return [list.slice(0, 10), list.slice(10)]
    },
    async artChange (area, type, title, title2) {
      // 点击后获取歌手列表
      this.artTitle = title + title2
      // 标题
      this.activeSearch.area = area
      this.activeSearch.type = type
      let res = await SingerSortList({ area: area, type: type, limit: 100 })
      // 获取的是热门歌手
      this.artList = this.changeList(res.data.artists)
      let Az = document.querySelectorAll('#A_Z')
      Az.forEach(val => val.classList.remove('EnglishColor'))
      Az[0].classList.add('EnglishColor')
    },
    async searchArt (val) {
      // 点击搜索
      if (val === false) {
        let res = await SingerSortList({
          area: this.activeSearch.area,
          type: this.activeSearch.type,
          limit: 100
        })
        this.artList = this.changeList(res.data.artists)
        return
      }
      let res = await SingerSortList({
        area: this.activeSearch.area,
        type: this.activeSearch.type,
        limit: 100,
        initial: val
      })
      this.artList = this.changeList(res.data.artists)
    },
    searchArtName (id) {
      // 点击歌手名字
      this.$router.push({ name: 'singer', query: { id: id } })
      // console.log('搜索', id);
    }
  },
  components: {},

  props: {},

  watch: {},

  computed: {},

}

</script>
<style scoped >
.el-backtop {
  /* 美化一下回到顶部按钮 */
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.5);
  background-color: black;
  width: 50px;
  height: 200px;
  border-radius: 10px;
}
.Big {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 1px;
}
.rankList {
  display: flex;
  flex-direction: row;
  padding: 10px;
  height: 50px;
  cursor: pointer;
  font-size: 18px;
  border-top: 1px solid #ccc;
}
.rankListPointer {
  background-color: #ccc;
}
.over_ellipsis {
  /* 超出省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.A_Z_list {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  /* margin-bottom: 20px; */
}
.English {
  width: 20px;
  cursor: pointer;
  border-radius: 3px;
}
.EnglishColor {
  background-color: #c20c0c;
  color: white;
}
.artList {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
.fontName {
  cursor: pointer;
}
.fontName:hover {
  color: red;
}
</style>